<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>滚动隐藏头部</title>
		<style type="text/css">
			
			* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #196e76;
  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  position: static;
}

h1 {
  width: 400px;
  margin: 200px auto;
  line-height: 1.5em;
  max-width: 800px;
  font-size: 36px;
  font-weight: 700;
  font-family: sans-serif;
  clear: both;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

h1:before {
  content: '';
  width: 100px;
  height: 5px;
  background: orange;
  margin: 0 45px 10px -145px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

#content {
  width: 400px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}
#content > div {
  position: relative;
  padding-top: 52px;
}
#content > div > .titleBox {
  position: absolute;
  background: #eee;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 30px;
  font-size: 12px;
  border-top: 1px solid #333;
}

#thanks {
  width: 400px;
  margin: 200px auto;
  text-align: right;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  font-size: 20px;
}

#thanks:after {
  content: '';
  width: 100px;
  height: 5px;
  background: orange;
  margin: 0 -145px 5px 45px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

		</style>
	</head>
	<body>
		<div id="content">

	<div class="fixedTitle">
		<img src="https://dummyimage.com/400x400/333333/cccccc.gif" />
		<p class="titleBox">Title #1</p>
	</div>

	<div class="fixedTitle">
		<img src="https://dummyimage.com/400x400/333333/cccccc.gif" />
		<p class="titleBox">Title #2</p>
	</div>

	<div class="fixedTitle">
		<img src="https://dummyimage.com/400x400/333333/cccccc.gif" />
		<p class="titleBox">Title #3</p>
	</div>

	<div class="fixedTitle">
		<img src="https://dummyimage.com/400x400/333333/cccccc.gif" />
		<p class="titleBox">Title #4</p>
	</div>

	<div class="fixedTitle">
		<img src="https://dummyimage.com/400x400/333333/cccccc.gif" />
		<p class="titleBox">Title #5</p>
	</div>

</div>

<p id="thanks">Thank U for Watching</p>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*$(function() {
 	jQuery.scrollSpeed(100, 2000, 'easeOutQuint');
 });*/

 $(window).scroll(function() {

 	$('.fixedTitle').each(function(i) {

 		var topDist = parseInt($(this).offset().top) - ($(window).scrollTop());
 		var boxHeight = parseInt($(this).css('height'));
 		var titleHeight = parseInt($(this).children('.titleBox').css('height'));

 		if (topDist <= (boxHeight * (-1)) + titleHeight) {
 			$(this).children('.titleBox').css('margin-top', (boxHeight - titleHeight));
 		} else if (topDist <= 0) {
 			$(this).children('.titleBox').css('margin-top', (topDist * (-1)) - 1);
 		} else {
 			$(this).children('.titleBox').css('margin-top', '0');
 		}

 	});

 });
	
	
</script>
	</body>
</html>
